<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>手机滑屏tab菜单</title>
	<link rel="stylesheet" href="wap_reset2017.css">
	<script src="adaptive-version2.js"></script>
    <script>
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 24;
        window['adaptive'].init();
    </script>
<style type="text/css">
	body{font-family:'苹方';background:#2e414a;}
	.subnav {width: 100%;overflow:hidden;background: #fff;height:1rem;position: relative;}
	.subnav ul {font-size:0.28rem;height:1rem;position: absolute;
		display:-webkit-box;display:-webkit-flex;display: flex;
		-webkit-box-align: center;-webkit-align-items:center;align-items:center;
		-webkit-transition:all .3s ease;transition:all .3s ease;
	}
	.subnav ul li a {color: #333;display:inline-block;padding:0.12rem 0.2rem;margin:0 0.2rem;white-space:nowrap;border:1px solid #babdc6;border-radius:0.4rem;}
	.subnav .active a {background: #2e9473;border-color:#2e9473;color:#fff;}

</style>
</head>

<body>

	<div class="subnav">
		<ul data-axis='0'>
			<li class="active"><a href="#">每日水果</a></li>
			<li><a href="#">草莓</a></li>
			<li><a href="#">苹果</a></li>
			<li><a href="#">香蕉</a></li>
			<li><a href="#">菠萝</a></li>
			<li><a href="#">哥布林</a></li>
			<li><a href="#">樱桃</a></li>
			<li><a href="#">丑八怪</a></li>
			<li><a href="#">牛油果</a></li>
			<li><a href="#">榴莲</a></li>
		</ul>
	</div>

<script src="zepto.min.js"></script>
<script>
$(function(){
	$(document).ready(function(){
		$('.subnav').subnav({
			move:true
		});
	})
})	
</script>
<script>
/*	移动端tab菜单，当前点击菜单自动移动到中间位置，可通过url参数subnav=param,页面打开定位到指定菜单
 *	http:xxx.html?subnav=6
 *	2018.4.28
 *	cm.yu
 *	param:
 *	move:true,默认关闭可滑动功能
 */
(function($){
	$.fn.subnav = function(options){
		var defaults = {
			move:false
		}
		var opts = $.extend({},defaults,options);
		var _this = this;
		var $subnavUl = _this.find('ul');
		var $actNav = $subnavUl.find('li');
		var screenWidth = $(window).width();	//获取屏幕宽度
		var subnavNum = $actNav.length;			//获取nav个数
		var subnavAllWidth = 0;					//nav总宽度
		
		for(var i=0;i<=subnavNum;i++){
			var liWidth = $actNav.eq(i).width();
			subnavAllWidth += liWidth;
		}
		 console.log('屏幕宽：'+screenWidth,'tab总宽度：'+subnavAllWidth);
		
		//获取url中当前subnav位置，并直接定位到当前nav
		function getUrlParam(name) {
			var search = document.location.search;
			var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
			var matcher = pattern.exec(search);
			var items = null;
			if (null != matcher) {
				try {
					items = decodeURIComponent(decodeURIComponent(matcher[1]));
				} catch (e) {
					try {
						items = decodeURIComponent(matcher[1]);
					} catch (e) {
						items = matcher[1];
					}
				}
			}
			return items;
		}
		var urlParam = getUrlParam("subnav");	//获取url得到的数值
		var prevNavWidth = 0;	//存储前面所有nav宽
		var thisIndex = 0;		//获取当前index
		var thisWidth = 0;		//获取当前nav宽
		
		if(urlParam && urlParam <= subnavNum && urlParam > 0){
			var activeNavWidth = $subnavUl.find('li').eq(urlParam-1).offset().width;	//获取指定nav宽
			thisIndex = urlParam-1;	//url传递过来当前nav位置
			thisWidth = $actNav.eq(thisIndex).width();	//url传递过来当前nav宽
			$subnavUl.find('li').eq(urlParam-1).addClass('active').siblings('li').removeClass('active');
			subnavMove();
		}
		
		//移动
		function subnavMove(){
			//得到当前nav之前所有nav宽,并存入 prevNavWidth
			for(var i=0;i<thisIndex;i++){
				var liWidth = $actNav.eq(i).width();
				prevNavWidth += liWidth;
			}
			var moveDistance = prevNavWidth-screenWidth/2+thisWidth/2;	//移动距离：前面nav总宽-半个屏幕+半个当前nav宽	
			//移动位置，当nav位置超过屏幕一半或不是最后几个nav
			if(prevNavWidth > screenWidth/2 && moveDistance < (subnavAllWidth-screenWidth)){
				$subnavUl.css({'-webkit-transform':'translateX(-'+ moveDistance +'px)'});
				$subnavUl.data('axis',-moveDistance);
			}
			//当nav在第一屏范围内
			else if(prevNavWidth < screenWidth/2){
				$subnavUl.css({'-webkit-transform':'translateX(0)'});
				$subnavUl.data('axis',0);
			}
			//当nav在最后一屏
			else if(moveDistance > (subnavAllWidth-screenWidth)){
				$subnavUl.css({'-webkit-transform':'translateX(-'+ (subnavAllWidth-screenWidth) +'px)'});
				$subnavUl.data('axis',-(subnavAllWidth-screenWidth));
			}	
		}
		
		$actNav.bind('click',function(){
			prevNavWidth = 0;					//存储前面所有nav宽
			thisWidth = $(this).width();		//获取当前nav宽
			thisIndex = $(this).index();		//获取当前index
			$(this).addClass('active').siblings('li').removeClass('active');
			$subnavUl.css({'transition-duration':'.3s'});
			subnavMove();
		});			
		
		/*	
		 *	touchmove事件,通过参数 move=true 控制，默认关闭可滑动功能。
		 */
		var pressX = 0;	//初始触摸点位置
		var tempX;		//临时存储transform坐标
		var axis;		//存储data-axis
		var deltaX = 0;	//滑动距离
		
		if(opts.move == true){
			_this.bind('touchstart',touchStart,false);
		}
		
		function touchStart(e){
			//e.preventDefault();	这里需要click事件，不阻止
			var touch = e.changedTouches[0];
			pressX = touch.pageX;
			_this.bind('touchmove',touchMove,false);
			_this.bind('touchend',touchEnd,false);
			document.addEventListener('touchmove',defaultEvent,false);
			tempX = $subnavUl.data("axis");	//当前X轴位置
			//console.log("获取tempX："+tempX)			
		}
	
		//移动X距离
		function touchMove(e){
			if (e.targetTouches.length == 1) {//只允许一个触摸点
				var touch = e.changedTouches[0];
				var deltaX = touch.pageX - pressX;
				var disX = deltaX+Number(tempX);	//滑动差值
				$subnavUl.css({'transition-duration':'0s'});
				//滑动值在导航总宽度减屏幕宽度范围内
				if(disX < 0 && disX > (screenWidth-subnavAllWidth)){
					$subnavUl.css({'-webkit-transform':'translate3d('+ disX +'px,0,0)'});
					$subnavUl.data('axis',disX);
				}else if(disX > 0){
					$subnavUl.css({'-webkit-transform':'translate3d(0,0,0)'});
					$subnavUl.data('axis',0);					
				}
			}
		}

		function touchEnd(e){}	//touchEnd事件要不要好像也无所谓，不过也不能太监
		
		//阻止页面的滑动默认事件
		function defaultEvent(e){
			e.preventDefault();
		}
	}
})(Zepto);	


</script>

</body>
</html>
